<template>
    <div class="user-list">
        <h3>用户列表</h3>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="昵称" prop="nickName" />
            <el-table-column label="账号" prop="account" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="地址" prop="address" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索" />
                </template>
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="page">
            <el-pagination :page-size="pageSize" :pager-count="pageSize" layout="prev, pager, next" :total="totalNum"
                @change="changePageFn" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { userList } from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '../../api/http'
interface User {
    date: string
    nickName: string
    address: string
    sex: string
    age: number
    imgUrl: string
    account: string
    id?: number | string
}
const search = ref('');

const handleDelete = (index: number, row: User) => {
    let { id, account } = row
    // console.log(id);
    ElMessageBox.confirm(
        `是否删除这个“${account}”账号?`,
        'Confirm',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    ).then(
        async () => {
            await api.removeUser({ id }).then(
                content => {
                    // console.log(content);
                    let { code, msg } = content
                    if (code != 200) {
                        ElMessage.error(msg)
                    }
                }
            )
        }
    )

    // console.log(index, row.id)
}

const tableData = ref<any>([])

let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(11)

const userListFn = async (page = 1, pageSize = 10) => {
    await userList({ page, pageSize }).then(
        content => {
            // console.log(content);
            let { code, total, result } = content
            if (code == 200) {
                tableData.value = result
                totalNum.value = total;
            }

        }
    )
}
// 点击分页时执行的函数
const changePageFn = (num: number) => {
    // console.log(value)
    page.value = num;
    userListFn(page.value, pageSize.value);
}

userListFn(page.value, pageSize.value);
</script>

<style lang="scss">
.user-list {
    h3 {
        margin-bottom: 15px;
    }
}
</style>